<template>
	<NavBarVue :title="'编辑资料'" />
	<view class="editBox">
		<u-toast ref="uToastRef"></u-toast>
		<view class="list">
			<view class="list_li" v-for="item in list" :key="item.id">
				<view style="font-weight: bold;">{{item.title}}</view>
				<view class="li_right">
					<view 
						style="width: 50px;height: 50px;position: absolute;right: 40rpx;" 
						v-if='item.id === "userNickPicture"'
					>
						<UploadFileVue :imgUrl="userStore?.userInfo?.userInfos[item.id]" />
						<!-- <BaseCoverImage :src="userStore?.userInfo?.userInfos[item.id]" /> -->
					</view>
					<input 
						v-else 
						style="text-align: right;padding-right: 10rpx;" 
						type="text" 
						:value="item.id !== 'regTime' ? userStore?.userInfo?.userInfos[item.id] : regTime" 
						@change="onInput($event,item.id)" 
					/>
					<u-icon name="arrow-right" color="#aaa" size="17"></u-icon>
				</view>
			</view>
		</view>
		<view class="editBtn" @click="saveUserInfo">
			保存
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		computed
	} from 'vue'
	import {
		useUserStore
	} from '../../../store'
	import NavBarVue from '../../../components/NavBar.vue';
	import dayjs from 'dayjs';
	const uToastRef = ref(null)
	const userStore = useUserStore()
	const list = ref([{
			id: 'userNickPicture',
			title: '头像',
		},
		{
			id: 'nickName',
			title: '昵称',
		},
		{
			id: 'introduction',
			title: '简介',
		},
		{
			id: 'ipAddress',
			title: '地区',
		},
		{
			id: 'regTime',
			title: '生日',
		},
	])
	function showToast(params) {
		uToastRef.value.show({
			...params,
			complete() {
				params.url && uni.switchTab({
					url: params.url
				});
			}
		});
	}
	// 修改用户信息
	const saveUserInfo = async () => {
		const res = await userStore.saveUserInfo(userStore.userInfo.userInfos)
		await userStore.getUserDetail()
		let showMessage = {
			iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png',
			duration: 500,
			url: '/pages/tab-mine/index'
		}
		if (res.code === '0') {
			showMessage = {
				type: 'success',
				message: "用户信息编辑成功",
				...showMessage
			}
		} else {
			showMessage = {
				type: 'error',
				message: "用户信息编辑失败",
				...showMessage
			}
		}
		showToast(showMessage)
	}
	onMounted(async () => {
		await userStore.getUserDetail()
	})
	
	let regTime = computed(() => {
		return dayjs(userStore?.userInfo?.userInfos['regTime']).format('MM.DD') // '25/01/2019'
	})
	
	const onInput = (e, id) => {
		userStore.userInfo.userInfos[id] = e.target.value
	}
</script>

<style scoped>
	.editBox {
		padding: 0px 25px;
		position: relative;
	}

	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.list_li {
		width: 100%;
		height: 70px;
		/* background: sandybrown; */
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.li_right {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.editBtn {
		width: 90%;
		height: 50px;
		background: linear-gradient(to right, rgb(255, 79, 102), rgb(252, 106, 124));
		border-radius: 10px;
		position: fixed;
		bottom: 30px;
		left: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #eee;
	}
</style>